<template>
  <svg aria-hidden="true" :style="[{ width: size }, { height: size }]">
    <use :href="`#icon-${dir}-${name}`" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
const { name, dir = 'home' } = defineProps<{
  name: string
  dir?: string
  color?: string
  size?: string
}>()
</script>

<style scoped>
svg {
  width: 1em;
  height: 1em;
  display: inline-block;
}
</style>
